<script setup lang="ts">
import dayjs from 'dayjs'

const router = useRouter()
// const qifuType = [{
//     value: 0,
//     label: '平安'
//     }, {
//     value: 1,
//     label: '健康'
//     }, {
//     value: 2,
//     label: '子嗣'
//     }, {
//     value: 3,
//     label: '学业'
//     }, {
//     value: 4,
//     label: '事业'
//     }, {
//     value: 5,
//     label: '姻缘'
//     }, {
//     value: 6,
//     label: '财源'
// }]
// const qifuPeople = [{
//     value: 0,
//     label: '为父母祈福'
//     }, {
//     value: 1,
//     label: '为子女祈福'
//     }, {
//     value: 2,
//     label: '为伴侣祈福'
//     }, {
//     value: 3,
//     label: '为朋友祈福'
//     }, {
//     value: 4,
//     label: '为自己祈福'
//     }, {
//     value: 5,
//     label: '为祖辈祈福'
//     }, {
//     value: 6,
//     label: '为孙辈祈福'
//     }, {
//     value: 7,
//     label: '为祖国祈福'
//     }, {
//     value: 8,
//     label: '为萌宠祈福'
// }]
interface Option { value: number, label: string }
const qifuType = ref<Option[]>([])
const qifuObj = ref<Option[]>([])
const route = useRoute()
const date = ref<string>('')
const productId = ref<Array<string> | string>()

async function getQifuType() {
  try {
    const { data: res } = await useFetchPost('/api/Qifu/getQifuTypeList')
    qifuType.value = res.value.data.rows.map((item: any) => ({
      value: item.id,
      label: item.name,
    }))
  }
  catch (error) {
    console.error('获取祈福类型失败', error)
  }
}
const userInfo = useUserInfoState()
async function getQifuObj() {
  const { data: res } = await useFetchPost('/api/Qifu/getQifuObjList')
  qifuObj.value = res.value.data.rows.map((item: any) => {
    return {
      value: item.id,
      label: item.name,
    }
  })
}

onMounted(() => {
  const rawDate = route.query.date
  const rawProduct = route.query.product
  date.value = rawDate as string
  if (Array.isArray(rawProduct)) {
    productId.value = rawProduct as string[]
  }
  else {
    productId.value = rawProduct as string
  }
  getQifuType()
  getQifuObj()
})
const typeSelected = ref()
const objSelected = ref()
const qfxy = ref('')
const qfr = ref('')
const qflxfs = ref('')
const isSubmit = ref(false)
const msg = ref('')
// 关闭弹窗
function closeModal() {
  isSubmit.value = false
}

function validateForm() {
  if (!typeSelected.value)
    return '请选择祈福类型'
  if (!objSelected.value)
    return '请选择祈福对象'
  if (!qfxy.value)
    return '请填写祈福心愿'
  if (!qfr.value)
    return '请填写祈福人'
  if (!qflxfs.value)
    return '请填写联系方式'
  return ''
}
async function submitHandle() {
  // if (!typeSelected.value || !objSelected.value || !qfxy.value || !qfr.value || !qflxfs.value) {
  //     isSubmit.value = true
  //     if (!typeSelected.value) {
  //         msg.value = '请选择祈福类型'
  //     }
  //     else if (!objSelected.value) {
  //         msg.value = '请选择祈福对象'
  //     }
  //     else if (!qfxy.value) {
  //         msg.value = '请填写祈福心愿'
  //     }
  //     else if (!qfr.value) {
  //         msg.value = '请填写祈福人'
  //     }
  //     else if (!qflxfs.value) {
  //         msg.value = '请填写联系方式'
  //     }
  //     return
  // }
  const error = validateForm()
  if (error) {
    msg.value = error
    isSubmit.value = true
    return
  }
  const data = {
    date: dayjs(date.value).isValid() ? dayjs(date.value).format('YYYY-MM-DD HH:mm:ss') : null,
    productId: productId.value,
    type: typeSelected.value,
    obj: objSelected.value,
    qfxy: qfxy.value,
    qfr: qfr.value,
    qflxfs: qflxfs.value,
  }

  const { data: res } = await useFetchPost('/api/Qifu/qifu', {
    data,
    type: 1,
    user_id: userInfo.value.id,
  })
  if (res.value.code == 200) {
    router.push({ path: '/qifu/order', query: { oid: res.value.data.oid } })
  }
}
</script>

<template>
  <div class="min-h-screen w-full relative">
    <Header back="/qifu" />
    <!-- 自适应背景图 -->
    <img
      src="/assets/images/qifu/tianxieye.png"
      alt=""
      class="h-auto w-full object-contain"
    >
    <div class="mx-auto w-[80%] left-0 right-0 top-[22%] absolute">
      <div class="flex flex-col gap-6 items-center">
        <!-- 添加垂直间距 -->
        <!-- 第一个下拉组 -->
        <div class="max-w-[500px] w-full relative">
          <!-- 限制最大宽度 -->
          <img
            src="/assets/images/qifu/input.png"
            class="w-full object-contain"
          >
          <div class="mx-auto px-4 flex w-[90%] items-center inset-0 left-0 right-0 justify-between absolute">
            <!-- 添加水平内边距 -->
            <USelectMenu
              v-model="typeSelected"
              placeholder="请选择您需要的祈福类型"
              :ui="{
                placeholder: '!text-[#99221b] font-bold text-sm',
                base: 'w-full', // 确保下拉框宽度填满
              }"
              :options="qifuType"
              variant="none"
              class="flex-1"
              :ui-menu="{ select: 'text-[#99221b] font-bold text-sm' }"
            >
              <template #trailing>
                <span class="opacity-0" />
              </template>
            </USelectMenu>
            <UIcon
              name="i-mdi-triangle-down"
              class="text-[#99221b] ml-2 shrink-0"
            />
          </div>
        </div>

        <!-- 第二个下拉组 -->
        <div class="max-w-[500px] w-full relative">
          <!-- 限制最大宽度 -->
          <img
            src="/assets/images/qifu/input.png"
            class="w-full object-contain"
          >
          <div class="mx-auto px-4 flex w-[90%] items-center inset-0 left-0 right-0 justify-between absolute">
            <!-- 添加水平内边距 -->
            <USelectMenu
              v-model="objSelected"
              placeholder="请选择祈福对象"
              :ui="{
                placeholder: '!text-[#99221b] font-bold text-sm',
                base: 'w-full', // 确保下拉框宽度填满
              }"
              :options="qifuObj"
              variant="none"
              class="flex-1"
              :ui-menu="{ select: 'text-[#99221b] font-bold text-sm' }"
            >
              <template #trailing>
                <span class="opacity-0" />
              </template>
            </USelectMenu>
            <UIcon
              name="i-mdi-triangle-down"
              class="text-[#99221b] ml-2 shrink-0"
            />
          </div>
        </div>
        <div class="mt-4 max-w-[500px] w-full relative z-1">
          <!-- 添加上边距 -->
          <img
            src="/assets/images/qifu/input.png"
            class="w-full object-contain"
          >
          <div class="mx-auto px-4 flex w-[90%] items-center inset-0 left-0 right-0 justify-between absolute">
            <span class="text-sm text-[#99221b] font-bold pl-[3%]">祈福心愿</span>
          </div>
        </div>
        <div class="max-w-[500px] w-[95%] relative -mt-[10%] md:-mt-[8%]">
          <!-- 添加上边距 -->
          <img
            src="/assets/images/qifu/text.png"
            class="w-full object-contain"
          >
          <UTextarea v-model="qfxy" class="text-[#99221b] font-bold mt-5 inset-0 absolute" variant="none" autoresize :maxrows="5" />
        </div>
        <div class="max-w-[500px] w-full relative">
          <!-- 限制最大宽度 -->
          <img
            src="/assets/images/qifu/input.png"
            class="w-full object-contain"
          >
          <div class="mx-auto px-4 flex w-[90%] items-center inset-0 left-0 right-0 justify-start absolute">
            <!-- 添加水平内边距 -->
            <span class="text-sm text-[#99221b] font-bold pl-[3%]">祈福人</span>
            <UInput v-model="qfr" class="text-[#99221b] w-[60%]" placeholder="" :ui="{ placeholder: 'placeholder-[#99221b] font-bold' }" variant="none" />
          </div>
        </div>
        <div class="max-w-[500px] w-full relative">
          <!-- 限制最大宽度 -->
          <img
            src="/assets/images/qifu/input.png"
            class="w-full object-contain"
          >
          <div class="mx-auto px-4 flex w-[90%] items-center inset-0 left-0 right-0 justify-start absolute">
            <!-- 添加水平内边距 -->
            <span class="text-sm text-[#99221b] font-bold pl-[3%]">联系方式</span>
            <UInput v-model="qflxfs" class="text-[#99221b] w-[60%]" placeholder="" :ui="{ placeholder: 'placeholder-[#99221b] font-bold' }" variant="none" />
          </div>
        </div>
        <div class="mx-auto mt-[8%] w-full left-0 right-0 relative">
          <!-- 限制最大宽度 -->
          <div class="animate-scale flex w-full bottom-[12%] justify-center z-1">
            <button class="opacity-90 w-[150px] cursor-pointer transition-opacity hover:opacity-100 md:w-[170px]" @click="submitHandle">
              <img
                src="/assets/images/qifu/i-submit.png"
                alt=""
              >
            </button>
          </div>
        </div>
      </div>
    </div>
    <TipModal
      v-model="isSubmit"
      title="提示"
      :message="msg"
      @close="closeModal"
    />
  </div>
</template>

<style scoped>
@keyframes scaleAnimation {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
.animate-scale {
  animation: scaleAnimation 2s ease-in-out infinite;
}
</style>
